/* solar system */
.solar-wrapper {
    position: relative;
    width: 1000px;
    height: 1000px;
    display: flex;
    align-items: center;
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.sun,
.mercury,
.venus,
.earth {
    position: relative;
    border-radius: 100%;
    text-align: center;
    font-size: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10;
}

.sun {
    width: 100px;
    height: 100px;
    margin-left: 450px;
    line-height: 100px;
    background-image: url('../img/sun.jpg');
    background-position: center center;
}

.mercury,
.venus,
.earth {
    width: 50px;
    height: 50px;
    margin-left: 100px;
    line-height: 50px;
}

@keyframes rotation {
    to {
        transform: rotate(1turn);
    }
}

.mercury {
    transform-origin: -150px 25px;
    animation: rotation 24s linear infinite;
    background-image: url('../img/mercury.jpeg');
}

.venus {
    transform-origin: -300px 25px;
    animation: rotation 62s linear infinite;
    background-image: url('../img/venus.jpeg');
}

.earth {
    transform-origin: -450px 25px;
    animation: rotation 100s linear infinite;
    background-image: url('../img/earth.jpeg');
}

.circle-line-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mercury-line,
.venus-line,
.earth-line {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 100%;
}

.mercury-line {
    top: 325px;
    left: 325px;
    width: 350px;
    height: 350px;
}

.venus-line {
    top: 175px;
    left: 175px;
    width: 650px;
    height: 650px;
}

.earth-line {
    top: 25px;
    left: 25px;
    width: 950px;
    height: 950px;
}

/* 逐帧动画 */
@keyframes run {
    0% {
        background-position: 0 0;
    }

    8.333% {
        background-position: -140px 0;
    }

    16.666% {
        background-position: -280px 0;
    }

    25.0% {
        background-position: -420px 0;
    }

    33.333% {
        background-position: -560px 0;
    }

    41.666% {
        background-position: -700px 0;
    }

    50.0% {
        background-position: -840px 0;
    }

    58.333% {
        background-position: -980px 0;
    }

    66.666% {
        background-position: -1120px 0;
    }

    75.0% {
        background-position: -1260px 0;
    }

    83.333% {
        background-position: -1400px 0;
    }

    91.666% {
        background-position: -1540px 0;
    }

    100% {
        background-position: 0 0;
    }
}

.animation {
    width: 140px;
    height: 140px;
    background: url('../img/754767-20160601000042992-1734972084.png') no-repeat;
    /* steps(1,start):动画一开始就跳到 100% 直到这一帧（不是整个周期）结束 */
    animation: run 1s steps(1, start) infinite;
}

/* clip-path */
.clip-path {
    clip-path: circle(40% at 50% 50%);
    /* clip-path: polygon(0 50%, 30% 30%, 50% 0, 70% 30%, 100% 50%, 70% 70%, 50% 100%, 30% 70%); */
    transition: clip-path .5s ease;
}

.clip-path:hover {
    clip-path: circle(75% at 50% 50%);
    /* clip-path: polygon(0 20%, 40% 20%, 50% 0, 60% 20%, 100% 20%, 60% 70%, 80% 100%, 50% 80%, 30% 100%, 40% 70%); */
}